<template>
	<view>
		<view class="banner-box" v-if="vuex_config.swiperInfo">
			<u-swiper :list="swiperList" @click="openPage" :effect3d="true" border-radius="20"></u-swiper>
		</view>
		<view class="section">
			<view class="go-report">
				<view class="left">
					<u-icon name="camera-fill"></u-icon>
					<text class="red">随手拍</text>
					<text class="black">随手拍</text>
				</view>
				<view class="right">
					<view class="go" @click="navTo('pages/report/submit')">我要上报</view>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="report-list">
				<view @click="navTo('/pages/report/show',{id:item.id})" class="item" v-for="(item,index) in reportList">
					<view class="top">
						<view class="label" v-if="item.level">{{item.level}}</view> {{item.labels}}
					</view>
					<view class="address u-line-1">
						<u-icon name="map-fill"></u-icon> {{item.address}}
					</view>
					<view class="images" v-if="item.images">
						<view class="image" @click.native.stop="previewImage(index,i)" border-radius="10"
							v-for="(img,i) in item.images_array">
							<u-image mode="aspectFill" :src="img" height="190">
							</u-image>
						</view>
					</view>
					<view class="content">{{item.content}}</view>
					<view class="bottom">
						<view class="time">{{item.createtime_text}}</view>
					</view>
				</view>
			</view>
			<!-- 空数据 -->
			<view class="u-u-p-t-80 u-m-t-80 u-p-b-80" v-if="!reportList.length">
				<u-empty text="列表为空" mode="reportList"></u-empty>
			</view>
			<!-- 加载更多 -->
			<view class="u-p-b-30" v-if="reportList.length">
				<u-loadmore :status="has_more ? status : 'nomore'" />
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>

	</view>
</template>
<script>
	const app = getApp();
	export default {
		data() {
			return {
				swiperList: [],
				config: null,
				reportList: [],
				params: {},
				query: {},
				page: 1,
				status: 'nomore',
				has_more: false,
				is_empty: false,
				scrollTop: 0,
			}
		},
		onLoad() {
			this.swiperList = this.vuex_config.swiperInfo;
			this.getList();
		},
		onShow() {
			let tmp = uni.getStorageSync('lifeData');
		},
		methods: {
			goShow: function(id) {
				uni.navigateTo({
					url: '/pages/report/show?id=' + id
				})
			},
			openPage(index) {
				let path = this.vuex_config.swiperInfo[index].path;
				if (path == '/' || !path) {
					return;
				}
				if (path.substr(0, 1) == 'p') {
					path = '/' + path;
				}
				if (path.indexOf('http') != -1) {
					this.$u.vuex('vuex_webs', this.vuex_config.swiperInfo[index]);
					this.$u.route('/pages/webview/index');
					return;
				}
				this.$u.route({
					url: path
				});
			},
			previewImage: function(index, i) {
				uni.previewImage({
					urls: this.reportList[index].images_array,
					current: i
				});
			},
			getList: async function() {
				let data = {
					page: this.page,
					...this.params,
					...this.query
				};
				let res = await this.$u.api.getReportOpenList(data);
				this.status = 'nomore';
				uni.stopPullDownRefresh();
				if (!res.code) {
					this.$u.toast(res.msg);
					return;
				}
				if (this.is_update) {
					this.reportList = [];
					this.is_update = false;
				}
				let pageList = res.data;
				this.is_show = true;
				this.has_more = pageList.current_page < pageList.last_page;
				this.reportList = [...this.reportList, ...pageList.data];
				this.is_empty = !this.reportList.length;
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		//下拉刷新
		onPullDownRefresh() {
			this.is_update = true;
			this.page = 1;
			this.getList();
		},
		onReachBottom() {
			if (this.has_more) {
				this.status = 'loading';
				this.page++;
				this.getList();
			}
		},
		onShareAppMessage(res) {
			return {
				title: this.vuex_config.name
			}
		},
		onShareTimeline() {
			return {
				title: this.vuex_config.name
			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f8fa;
	}

	.red {
		color: red;
		font-size:100rpx;
	}

	.black {
		color: #000;
		padding-left: 10rpx;
	}

	.banner-box {
		padding-top: 50rpx;
	}

	.section {
		padding: 50rpx 50rpx 0 50rpx;
	}

	.banner-box {
		position: relative;
	}

	.go-report {
		display: flex;
		align-items: center;
		border-radius: 20rpx;
		padding: 30rpx;
		background-color: #5cc1a1;
		color: #fff;
	}

	.go-report .left {
		font-size: 32rpx;
		font-weight: 600;
	}

	.go-report .left .u-icon {
		margin-right: 10rpx;
	}

	.go-report .right {
		margin-left: auto;
	}

	.go-report .right .go {
		background-color: #ffffff;
		color: #5cc1a1;
		padding: 10rpx 30rpx;
		border-radius: 50em;
		font-weight: 600;

	}

	.goSubmitBtn {
		position: fixed;
		width: calc(100% - 60rpx);
		left: 30rpx;
		bottom: 30rpx;
	}
</style>